<template>
  <div class="content">
    <div v-show="!isTwo" ref="charts" class="chart-box" style="width: 100%; margin: 0 auto"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import china from '@/assets/map/china.json'
export default {
  data() {
    return {
      mapList: [],
      isTwo: false,
    }
  },
  watch: {
    isTwo: {
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    const list = require('@/assets/travelList/travelCity.json')
    let cityList = list.data.cityList
    cityList.forEach((item, index) => {
      let arr = { name: item, selected: false, value: index + 1 }
      this.mapList.push(arr)
    })
    this.initMap()
  },
  methods: {
    initMap() {
      const option = {
        backgroundColor: '#fff', // 背景颜色
        // geo: {
        //   // 地图配置
        //   map: 'china',
        //   label: {
        //     // 图形上的文本标签
        //     normal: {
        //       // 通常状态下的样式
        //       show: true,
        //       textStyle: {
        //         color: '#fff',
        //       },
        //     },
        //     emphasis: {
        //       // 鼠标放上去高亮的样式
        //       textStyle: {
        //         color: '#fff',
        //       },
        //     },
        //   },
        //   itemStyle: {
        //     // 地图区域的样式设置
        //     normal: {
        //       // 通常状态下的样式
        //       borderColor: '#5089EC',
        //       borderWidth: 1,
        //     },
        //     // 鼠标放上去高亮的样式
        //     emphasis: {
        //       areaColor: '#2386AD',
        //       borderWidth: 0,
        //     },
        //   },
        // },
        series: [
          {
            type: 'map',
            mapType: 'china',
            label: {
              // 图形上的文本标签
              normal: {
                // 通常状态下的样式
                show: true,
                textStyle: {
                  color: '#ccbbff',
                },
              },
              emphasis: {
                // 鼠标放上去高亮的样式
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              // 地图区域的样式设置
              normal: {
                // 通常状态下的样式
                borderColor: '#e8ccff',
                borderWidth: 1,
              },
              // 鼠标放上去高亮的样式
              emphasis: {
                areaColor: '#9955ff',
                borderWidth: 0,
              },
            },
            aspectScale: 0.75,
            zoom: 1.2,
            data: this.mapList, //各省地图颜色数据依赖value
          },
        ],
        dataRange: {
          x: '-1000 px', //图例横轴位置
          y: '-1000 px', //图例纵轴位置
          splitList: [
            { start: 1, end: 1, color: '#ff88c2' },
            { start: 2, end: 2, color: '#ff8888' },
            { start: 3, end: 3, color: '#ffa488' },
            { start: 4, end: 4, color: '#ffbb66' },
            { start: 5, end: 5, color: '#ffdd55' },
            { start: 6, end: 6, color: '#ffff77' },
            { start: 7, end: 7, color: '#ddff77' },
            { start: 8, end: 8, color: '#bbff66' },
            { start: 9, end: 9, color: '#66ff66' },
            { start: 10, end: 10, color: '#77ffcc' },
            { start: 11, end: 11, color: '#77ffee' },
            { start: 12, end: 12, color: '#66ff66' },
            { start: 13, end: 13, color: '#77ddff' },
            { start: 14, end: 14, color: '#99bbff' },
            { start: 15, end: 15, color: '#9f88ff' },
            { start: 16, end: 16, color: '#b088ff' },
            { start: 17, end: 17, color: '#d28eff' },
            { start: 18, end: 18, color: '#e38eff' },
            { start: 19, end: 19, color: '#ff77ff' },
            { start: 20, end: 20, color: '#ffb7dd' },
            { start: 21, end: 21, color: '#ffcccc' },
            { start: 22, end: 22, color: '#ffc8b4' },
            { start: 23, end: 23, color: '#ffddaa' },
            { start: 24, end: 24, color: '#ffee99' },
            { start: 25, end: 25, color: '#ffffbb' },
            { start: 26, end: 26, color: '#eeffbb' },
            { start: 27, end: 27, color: '#ccff99' },
            { start: 28, end: 28, color: '#99ff99' },
            { start: 29, end: 29, color: '#bbffee' },
            { start: 30, end: 30, color: '#aaffee' },
            { start: 31, end: 31, color: '#99ffff' },
            { start: 32, end: 32, color: '#cceeff' },
            { start: 33, end: 33, color: '#ccddff' },
            { start: 34, end: 34, color: '#ccccff' },
          ],
        },
      }
      // 地图注册，第一个参数的名字必须和option.geo.map一致
      echarts.registerMap('china', /**/ china)
      let chart = echarts.init(this.$refs.charts)
      chart.setOption(option)
      window.addEventListener('resize', function () {
        chart.resize()
      })
      chart.on('click', params => this.handleMapClick(params))
    },
    handleMapClick(params) {
      this.$router.push({
        path: '/twoMap',
        query: {
          cityName: params.name,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.chart-box {
  height: calc(140vh - 100px);
}
</style>
